<!-- 
  It's a Vue3 component that renders an SVG icon using the <use> element. 
-->
<template>
  <svg aria-hidden="true" class="svg-icon" :color="color" :style="iconStyle">
    <use :xlink:href="symbolId"></use>
  </svg>
</template>

<script setup lang="ts" name="SvgIcon">
import { computed, type CSSProperties } from 'vue'

interface SvgProps {
  name: string //图标的名称 ==> 必传
  prefix?: string // 图标的前缀 ==> 非必传,默认是 'icon'
  color?: string // 图标的颜色 ==> 非必传,默认是 'black
  iconStyle?: CSSProperties // 图标的样式 ==> 非必传,默认是 {}
}
// props定义默认值
const props = withDefaults(defineProps<SvgProps>(), {
  prefix: 'icon',
  color: 'black',
  iconStyle: () => ({ width: '30px', height: '30px' }),
})
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>

<style scoped>
.svg-icon {
  overflow: hidden;
  vertical-align: -0.15em;
  fill: currentcolor;
}
</style>
